<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style type="text/css">
    .col-xs-1-5,
    .col-sm-1-5,
    .col-md-1-5,
    .col-lg-1-5 {
        position: relative;
        min-height: 1px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .col-xs-1-5 {
        width: 20%;
        float: left;
    }

    @media (min-width: 768px) {
        .col-sm-1-5 {
            width: 20%;
            float: left;
        }
    }

    @media (min-width: 992px) {
        .col-md-1-5 {
            width: 20%;
            float: left;
        }
    }

    @media (min-width: 1200px) {
        .col-lg-1-5 {
            width: 20%;
            float: left;
        }
    }
</style>
<body class="hold-transition skin-blue sidebar-mini" style="background-color: rgb(236, 240, 245)">

<!--<section class="content-header">
    <h1>首页</h1>
</section>-->
<section class="content">
    <div class="row">
        <div class="col-xs-4">
            <div class="box box-default" style="height: 250px;overflow: auto">
                <div class="box-header with-border">
                    <h3 class="box-title"><b><span id="box1-title"></span>设计任务总览</b></h3>
                </div>
                <div class="box-body">
                    <div class="col-xs-6">
                        <div class="small-box bg-aqua" style="border-radius: 5px 22px 5px 22px">
                            <h3 class="text-center" id="box1-num1"></h3>
                            <h4 class="text-center">接收项目数</h4>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="small-box bg-blue" style="border-radius: 5px 22px 5px 22px">
                            <h3 class="text-center" id="box1-num2"></h3>
                            <h4 class="text-center">下达项目数</h4>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="small-box bg-green" style="border-radius: 5px 22px 5px 22px">
                            <h3 class="text-center" id="box1-num3"></h3>
                            <h4 class="text-center">完成项目数</h4>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="small-box bg-yellow" style="border-radius: 5px 22px 5px 22px">
                            <h3 class="text-center" id="box1-num4"></h3>
                            <h4 class="text-center">待创建产品结构数量</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="box box-default" style="height: 250px;overflow: auto">
                <div class="box-header with-border">
                    <h3 class="box-title"><b><span id="box2-title"></span>工艺任务总览</b></h3>
                </div>
                <div class="box-body">
                    <div class="col-xs-6">
                        <div class="small-box bg-aqua" style="border-radius: 5px 22px 5px 22px">
                            <h3 class="text-center" id="box2-num1"></h3>
                            <h4 class="text-center">接收数量</h4>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="small-box bg-blue" style="border-radius: 5px 22px 5px 22px">
                            <h3 class="text-center" id="box2-num2"></h3>
                            <h4 class="text-center">下达数量</h4>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="small-box bg-green" style="border-radius: 5px 22px 5px 22px">
                            <h3 class="text-center" id="box2-num3"></h3>
                            <h4 class="text-center">完成数量</h4>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="small-box bg-yellow" style="border-radius: 5px 22px 5px 22px">
                            <h3 class="text-center" id="box2-num4"></h3>
                            <h4 class="text-center">待下达数量</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-4">

            <div class="box box-default" style="height: 250px;overflow: auto">
                <div class="box-header with-border">
                    <div class="row text-center">
                        <button type="button" id="arrow-left" class="btn btn-success btn-lg"><i class="fa fa-arrow-left"></i></button>
                        <button type="button" class="btn btn-success btn-lg" onclick="method.change(1)">按年统计</button>
                        <button type="button" class="btn btn-success btn-lg" onclick="method.change(2)">按月统计</button>
                        <button type="button" id="arrow-right" class="btn btn-success btn-lg"><i class="fa fa-arrow-right"></i></button>
                    </div>
                    <h3 class="box-title" style="margin-top: 12px"><b>个人待办事项</b></h3>
                </div>
                <div class="box-body">
                    <ul class="nav nav-pills nav-stacked">
                        <li th:if="${waitHandler.num1 > 0}"><a>提报计划待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num1}"></span></a></li>
                        <li th:if="${waitHandler.num2 > 0}"><a>制作件清单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num2}"></span></a></li>
                        <li th:if="${waitHandler.num3 > 0}"><a>图纸变更单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num3}"></span></a></li>
                        <li th:if="${waitHandler.num4 > 0}"><a>外观设计清单审核<span class="badge label-primary pull-right" th:text="${waitHandler.num4}"></span></a></li>
                        <li th:if="${waitHandler.num5 > 0}"><a>提报计划待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num5}"></span></a></li>
                        <li th:if="${waitHandler.num6 > 0}"><a>制作件清单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num6}"></span></a></li>
                        <li th:if="${waitHandler.num7 > 0}"><a>图纸变更单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num7}"></span></a></li>
                        <li th:if="${waitHandler.num8 > 0}"><a>待创建存档清单<span class="badge label-primary pull-right" th:text="${waitHandler.num8}"></span></a></li>
                        <!--<li th:if="${waitHandler.num9 > 0}"><a>成本信息定额审核<span class="badge label-primary pull-right" th:text="${waitHandler.num9}"></span></a></li>-->
                        <li th:if="${waitHandler.num10 > 0}"><a>待校对工艺卡<span class="badge label-primary pull-right" th:text="${waitHandler.num10}"></span></a></li>
                        <li th:if="${waitHandler.num11 > 0}"><a>存档清单审核<span class="badge label-primary pull-right" th:text="${waitHandler.num11}"></span></a></li>

                        <li th:if="${waitHandler.num12 > 0}"><a>设计工时确认单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num12}"></span></a></li>
                        <li th:if="${waitHandler.num13 > 0}"><a>设计工时确认单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num13}"></span></a></li>
                        <li th:if="${waitHandler.num14 > 0}"><a>下料工时计划单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num14}"></span></a></li>
                        <li th:if="${waitHandler.num15 > 0}"><a>下料工时计划单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num15}"></span></a></li>
                        <li th:if="${waitHandler.num16 > 0}"><a>铆焊工时计划单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num16}"></span></a></li>
                        <li th:if="${waitHandler.num17 > 0}"><a>铆焊工时计划单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num17}"></span></a></li>
                        <li th:if="${waitHandler.num18 > 0}"><a>热处理计划单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num18}"></span></a></li>
                        <li th:if="${waitHandler.num19 > 0}"><a>热处理计划单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num19}"></span></a></li>
                        <li th:if="${waitHandler.num20 > 0}"><a>装配工时计划单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num20}"></span></a></li>
                        <li th:if="${waitHandler.num21 > 0}"><a>装配工时计划单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num21}"></span></a></li>
                        <li th:if="${waitHandler.num22 > 0}"><a>涂装工时计划单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num22}"></span></a></li>
                        <li th:if="${waitHandler.num23 > 0}"><a>涂装工时计划单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num23}"></span></a></li>
                        <li th:if="${waitHandler.num24 > 0}"><a>安装工时计划单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num24}"></span></a></li>
                        <li th:if="${waitHandler.num25 > 0}"><a>安装工时计划单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num25}"></span></a></li>
                        <li th:if="${waitHandler.num26 > 0}"><a>调试工时确认单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num26}"></span></a></li>
                        <li th:if="${waitHandler.num27 > 0}"><a>调试工时确认单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num27}"></span></a></li>
                        <li th:if="${waitHandler.num28 > 0}"><a>机加工时计划单待提交<span class="badge label-primary pull-right" th:text="${waitHandler.num28}"></span></a></li>
                        <li th:if="${waitHandler.num29 > 0}"><a>机加工时计划单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num29}"></span></a></li>
                        <li th:if="${waitHandler.num30 > 0}"><a>项目联络单待审核<span class="badge label-primary pull-right" th:text="${waitHandler.num30}"></span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <div class="box box-solid bg-blue-gradient">
                <div class="box-header with-border">
                    <h3 class="box-title"><b><span id="box3-title"></span></b></h3><br>
                    <h3 class="box-title"><b>外购件提报计划总览</b></h3>
                </div>
                <div class="box-body" style="height: 240px;overflow:auto;">
                    <h4><i class="fa fa-pencil-square"></i> 已提交</h4>
                    <h5>外购件计划单</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box3-num1"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box3-num2"></span></span></li>
                    </ul>
                    <h4><i class="fa fa-pencil-square"></i> 未提交</h4>
                    <h5>外购件计划单</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box3-num3"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box3-num4"></span></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="box box-solid bg-green-gradient">
                <div class="box-header with-border">
                    <h3 class="box-title"><b><span id="box4-title"></span></b></h3><br>
                    <h3 class="box-title"><b>制作件清单总览</b></h3>
                </div>
                <div class="box-body" style="height: 240px;overflow:auto;">
                    <h4><i class="fa fa-pencil-square"></i> 机械设计院</h4>
                    <h5>已提交</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box4-num1"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box4-num2"></span></span></li>
                    </ul>
                    <h5>未提交</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box4-num3"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box4-num4"></span></span></li>
                    </ul>
                    <h4><i class="fa fa-pencil-square"></i> 生产运营部</h4>
                    <h5>已提交</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box4-num5"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box4-num6"></span></span></li>
                    </ul>
                    <h5>未提交</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box4-num7"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box4-num8"></span></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="box box-solid bg-yellow-gradient">
                <div class="box-header with-border">
                    <h3 class="box-title"><b><span id="box5-title"></span></b></h3><br>
                    <h3 class="box-title"><b>图纸变更单总览</b></h3>
                </div>
                <div class="box-body" style="height: 240px;overflow:auto;">
                    <h4><i class="fa fa-pencil-square"></i> 机械设计院</h4>
                    <h5>图纸变更单</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;已提交<span class="badge label-primary pull-right" id="box5-num1"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;未提交<span class="badge label-primary pull-right" id="box5-num2"></span></span></li>
                    </ul>
                    <h4><i class="fa fa-pencil-square"></i> 生产运营部</h4>
                    <h5>图纸变更单</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;已提交<span class="badge label-primary pull-right" id="box5-num3"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;未提交<span class="badge label-primary pull-right" id="box5-num4"></span></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="box box-solid bg-red-gradient">
                <div class="box-header with-border">
                    <h3 class="box-title"><b><span id="box6-title"></span></b></h3><br>
                    <h3 class="box-title"><b>外观设计总览</b></h3>
                </div>
                <div class="box-body" style="height: 240px;overflow:auto;">
                    <h4><i class="fa fa-pencil-square"></i> 已提交</h4>
                    <h5>外观设计清单</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box6-num1"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box6-num2"></span></span></li>
                    </ul>
                    <h4><i class="fa fa-pencil-square"></i> 未提交</h4>
                    <h5>外观设计清单</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box6-num3"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box6-num4"></span></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="box box-solid bg-maroon-gradient">
                <div class="box-header with-border">
                    <h3 class="box-title"><b><span id="box7-title"></span></b></h3><br>
                    <h3 class="box-title"><b>工艺任务总览</b></h3>
                </div>
                <div class="box-body" style="height: 240px;overflow:auto;">
                    <h4><i class="fa fa-pencil-square"></i> 已接收制作件计划</h4>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box7-num1"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box7-num2"></span></span></li>
                    </ul>
                    <h4><i class="fa fa-pencil-square"></i> 未接收制作件计划</h4>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box7-num3"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box7-num4"></span></span></li>
                    </ul>
                    <h4><i class="fa fa-pencil-square"></i> 图纸变更单</h4>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;已接收<span class="badge label-primary pull-right" id="box7-num5"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;未接收<span class="badge label-primary pull-right" id="box7-num6"></span></span></li>
                    </ul>
                    <h4><i class="fa fa-pencil-square"></i> 已转生产数量</h4>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;工艺编制任务<span class="badge label-primary pull-right" id="box7-num7"></span></span></li>
                    </ul>
                    <h4><i class="fa fa-pencil-square"></i> 未转生产数量</h4>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;工艺编制任务<span class="badge label-primary pull-right" id="box7-num8"></span></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="box box-solid bg-purple-gradient">
                <div class="box-header with-border">
                    <h3 class="box-title"><b><span id="box8-title"></span></b></h3><br>
                    <h3 class="box-title"><b>工艺提报计划总览</b></h3>
                </div>
                <div class="box-body" style="height: 240px;overflow:auto;">
                    <h4><i class="fa fa-pencil-square"></i> 已提交</h4>
                    <h5>外购件提报计划</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box8-num1"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box8-num2"></span></span></li>
                    </ul>
                    <h5>原材料提报计划</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box8-num3"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box8-num4"></span></span></li>
                    </ul>
                    <h5>外协件提报计划</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box8-num5"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box8-num6"></span></span></li>
                    </ul>
                    <h4><i class="fa fa-pencil-square"></i> 未提交</h4>
                    <h5>外购件提报计划</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box8-num7"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box8-num8"></span></span></li>
                    </ul>
                    <h5>原材料提报计划</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box8-num9"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box8-num10"></span></span></li>
                    </ul>
                    <h5>外协件提报计划</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;计划单<span class="badge label-primary pull-right" id="box8-num11"></span></span></li>
                        <li class="no-border"><span>&emsp;&emsp;&emsp;&emsp;变更单<span class="badge label-warning pull-right" id="box8-num12"></span></span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row no-padding">
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title"><b>设计院当前项目总览</b></h3>
            </div>
            <div class="box-body">
                <div class="col-md-4"><canvas id="barChart1" height="200"></canvas></div>
                <div class="col-md-4"><canvas id="barChart2" height="200"></canvas></div>
                <div class="col-md-4"><canvas id="barChart4" height="140"></canvas></div>
                <div class="col-md-6"><canvas id="barChart3" height="200"></canvas></div>
                <div class="col-md-6"><canvas id="barChart5" height="140"></canvas></div>
            </div>
        </div>
    </div>
    <!--<div class="row no-padding">-->
        <!--<div class="box box-default">-->
            <!--<div class="box-header with-border">-->
                <!--<h3 class="box-title"><b>工艺科当前项目总览</b></h3>-->
            <!--</div>-->
            <!--<div class="box-body">-->
                <!--<div class="col-md-6"><canvas id="barChart6" height="140"></canvas></div>-->
                <!--<div class="col-md-6"><canvas id="barChart7" height="140"></canvas></div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    let type = 1; // 统计类型， 1=年，2=年月

    let year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;

    let barChartData1 = {
        labels  : [[${sectionName1}]],
        datasets: [{
            label: '执行中',
            backgroundColor: '#f39c12',
            data: [[${sectionExecutingProjectCount1}]]
        }, {
            label: '未开始',
            backgroundColor: '#d2d6de',
            maxBarThickness: 150,
            data: [[${sectionNotStartedProjectCount1}]]
        }]
    };
    let barChartData2 = {
        labels  : [[${sectionName2}]],
        datasets: [{
            label: '执行中',
            backgroundColor: '#f39c12',
            data: [[${sectionExecutingProjectCount2}]]
        }, {
            label: '未开始',
            backgroundColor: '#d2d6de',
            data: [[${sectionNotStartedProjectCount2}]]
        }]
    };
    let barChartData3 = {
        labels  : [[${sectionName3}]],
        datasets: [{
            label: '执行中',
            backgroundColor: '#f39c12',
            data: [[${sectionExecutingProjectCount3}]]
        }, {
            label: '未开始',
            backgroundColor: '#d2d6de',
            data: [[${sectionNotStartedProjectCount3}]]
        }]
    };
    let barChartData4 = {
        labels  : [[${sectionName4}]],
        datasets: [{
            label: '执行中',
            backgroundColor: '#f39c12',
            data: [[${sectionExecutingProjectCount4}]]
        }, {
            label: '未开始',
            backgroundColor: '#d2d6de',
            data: [[${sectionNotStartedProjectCount4}]]
        }]
    };
    let barChartData5 = {
        labels  : [[${sectionName5}]],
        datasets: [{
            label: '执行中',
            backgroundColor: '#f39c12',
            data: [[${sectionExecutingProjectCount5}]]
        }, {
            label: '未开始',
            backgroundColor: '#d2d6de',
            data: [[${sectionNotStartedProjectCount5}]]
        }]
    };
    // let barChartData6 = {
    //     labels  : [[${craName1}]],
    //     datasets: [{
    //         label: '执行中',
    //         backgroundColor: '#f39c12',
    //         data: [[${craExecCount1}]]
    //     }, {
    //         label: '未开始',
    //         backgroundColor: '#d2d6de',
    //         data: [[${craNotCount1}]]
    //     }]
    // };
    // let barChartData7 = {
    //     labels  : [[${craName1}]],
    //     datasets: [{
    //         label: '执行中',
    //         backgroundColor: '#f39c12',
    //         data: [[${craPartExecCount2}]]
    //     }, {
    //         label: '未开始',
    //         backgroundColor: '#d2d6de',
    //         data: [[${craPartNotCount2}]]
    //     }]
    // };

    let method = {
        updateTitle: function ($e) {
            if (type === 1) {
                $e.text(year + "年");
            } else {
                $e.text(month + "月");
            }
        },
        updateBox1: function (data) {
            this.updateTitle($("#box1-title"));
            $("#box1-num1").text(data.box1Num1);
            $("#box1-num2").text(data.box1Num2);
            $("#box1-num3").text(data.box1Num3);
            $("#box1-num4").text(data.box1Num4);
        },
        updateBox2: function (data) {
            this.updateTitle($("#box2-title"));
            $("#box2-num1").text(data.box2Num1);
            $("#box2-num2").text(data.box2Num2);
            $("#box2-num3").text(data.box2Num3);
            $("#box2-num4").text(data.box2Num4);
        },
        updateBox3: function (data) {
            this.updateTitle($("#box3-title"));
            $("#box3-num1").text(data.box3Num1);
            $("#box3-num2").text(data.box3Num2);
            $("#box3-num3").text(data.box3Num3);
            $("#box3-num4").text(data.box3Num4);
            /*$("#box3-num5").text(data.box3Num5);
            $("#box3-num6").text(data.box3Num6);
            $("#box3-num7").text(data.box3Num7);
            $("#box3-num8").text(data.box3Num8);*/
        },
        updateBox4: function (data) {
            this.updateTitle($("#box4-title"));
            $("#box4-num1").text(data.box4Num1);
            $("#box4-num2").text(data.box4Num2);
            $("#box4-num3").text(data.box4Num3);
            $("#box4-num4").text(data.box4Num4);
            $("#box4-num5").text(data.box4Num5);
            $("#box4-num6").text(data.box4Num6);
            $("#box4-num7").text(data.box4Num7);
            $("#box4-num8").text(data.box4Num8);
            /*$("#box4-num9").text(data.box4Num9);
            $("#box4-num10").text(data.box4Num10);
            $("#box4-num11").text(data.box4Num11);*/
        },
        updateBox5: function (data) {
            this.updateTitle($("#box5-title"));
            $("#box5-num1").text(data.box5Num1);
            $("#box5-num2").text(data.box5Num2);
            $("#box5-num3").text(data.box5Num3);
            $("#box5-num4").text(data.box5Num4);
            /*$("#box5-num5").text(data.box5Num5);
            $("#box5-num6").text(data.box5Num6);
            $("#box5-num7").text(data.box5Num7);
            $("#box5-num8").text(data.box5Num8);
            $("#box5-num9").text(data.box5Num9);
            $("#box5-num10").text(data.box5Num10);*/
        },
        updateBox6: function (data) {
            this.updateTitle($("#box6-title"));
            $("#box6-num1").text(data.box6Num1);
            $("#box6-num2").text(data.box6Num2);
            $("#box6-num3").text(data.box6Num3);
            $("#box6-num4").text(data.box6Num4);
        },
        updateBox7: function (data) {
            this.updateTitle($("#box7-title"));
            $("#box7-num1").text(data.box7Num1);
            $("#box7-num2").text(data.box7Num2);
            $("#box7-num3").text(data.box7Num3);
            $("#box7-num4").text(data.box7Num4);
            $("#box7-num5").text(data.box7Num5);
            $("#box7-num6").text(data.box7Num6);
            $("#box7-num7").text(data.box7Num7);
            $("#box7-num8").text(data.box7Num8);
        },
        updateBox8: function (data) {
            this.updateTitle($("#box8-title"));
            $("#box8-num1").text(data.box8Num1);
            $("#box8-num2").text(data.box8Num2);
            $("#box8-num3").text(data.box8Num3);
            $("#box8-num4").text(data.box8Num4);
            $("#box8-num5").text(data.box8Num5);
            $("#box8-num6").text(data.box8Num6);
            $("#box8-num7").text(data.box8Num7);
            $("#box8-num8").text(data.box8Num8);
            $("#box8-num9").text(data.box8Num9);
            $("#box8-num10").text(data.box8Num10);
            $("#box8-num11").text(data.box8Num11);
            $("#box8-num12").text(data.box8Num12);
        },
        getBox1Data1: function () {
            debugger;
            js.get({
                url: ctx + 'overview/home/box1/year',
                data: {
                    year : year
                },
                success: function (result) {
                    method.updateBox1(result);
                }
            });
        },
        getBox1Data2: function () {
            js.get({
                url: ctx + 'overview/home/box1/month',
                data: {
                    year : year,
                    month : month
                },
                success: function (result) {
                    method.updateBox1(result);
                }
            });
        },
        getBox2Data1: function () {
            js.get({
                url: ctx + 'overview/home/box2/year',
                data: {
                    year : year
                },
                success: function (result) {
                    method.updateBox2(result);
                }
            });
        },
        getBox2Data2: function () {
            js.get({
                url: ctx + 'overview/home/box2/month',
                data: {
                    year : year,
                    month : month
                },
                success: function (result) {
                    method.updateBox2(result);
                }
            });
        },
        getBox3Data1: function () {
            js.get({
                url: ctx + 'overview/home/box3/year',
                data: {
                    year : year
                },
                success: function (result) {
                    method.updateBox3(result);
                }
            });
        },
        getBox3Data2: function () {
            js.get({
                url: ctx + 'overview/home/box3/month',
                data: {
                    year : year,
                    month : month
                },
                success: function (result) {
                    method.updateBox3(result);
                }
            });
        },
        getBox4Data1: function () {
            js.get({
                url: ctx + 'overview/home/box4/year',
                data: {
                    year : year
                },
                success: function (result) {
                    method.updateBox4(result);
                }
            });
        },
        getBox4Data2: function () {
            js.get({
                url: ctx + 'overview/home/box4/month',
                data: {
                    year : year,
                    month : month
                },
                success: function (result) {
                    method.updateBox4(result);
                }
            });
        },
        getBox5Data1: function () {
            js.get({
                url: ctx + 'overview/home/box5/year',
                data: {
                    year : year
                },
                success: function (result) {
                    method.updateBox5(result);
                }
            });
        },
        getBox5Data2: function () {
            js.get({
                url: ctx + 'overview/home/box5/month',
                data: {
                    year : year,
                    month : month
                },
                success: function (result) {
                    method.updateBox5(result);
                }
            });
        },
        getBox6Data1: function () {
            js.get({
                url: ctx + 'overview/home/box6/year',
                data: {
                    year : year
                },
                success: function (result) {
                    method.updateBox6(result);
                }
            });
        },
        getBox6Data2: function () {
            js.get({
                url: ctx + 'overview/home/box6/month',
                data: {
                    year : year,
                    month : month
                },
                success: function (result) {
                    method.updateBox6(result);
                }
            });
        },
        getBox7Data1: function () {
            js.get({
                url: ctx + 'overview/home/box7/year',
                data: {
                    year : year
                },
                success: function (result) {
                    method.updateBox7(result);
                }
            });
        },
        getBox7Data2: function () {
            js.get({
                url: ctx + 'overview/home/box7/month',
                data: {
                    year : year,
                    month : month
                },
                success: function (result) {
                    method.updateBox7(result);
                }
            });
        },
        getBox8Data1: function () {
            js.get({
                url: ctx + 'overview/home/box8/year',
                data: {
                    year : year
                },
                success: function (result) {
                    method.updateBox8(result);
                }
            });
        },
        getBox8Data2: function () {
            js.get({
                url: ctx + 'overview/home/box8/month',
                data: {
                    year : year,
                    month : month
                },
                success: function (result) {
                    method.updateBox8(result);
                }
            });
        },
        update: function () {
            if (type === 1) {
                debugger;
                this.getBox1Data1();
                this.getBox2Data1();
                this.getBox3Data1();
                this.getBox4Data1();
                this.getBox5Data1();
                this.getBox6Data1();
                this.getBox7Data1();
                this.getBox8Data1();
            } else {
                this.getBox1Data2();
                this.getBox2Data2();
                this.getBox3Data2();
                this.getBox4Data2();
                this.getBox5Data2();
                this.getBox6Data2();
                this.getBox7Data2();
                this.getBox8Data2();
            }
        },
        change: function (t) {
            type = t;
            this.update();
        }
    }

    $(function () {

        $("#arrow-left").click(function () {
            if (type === 1) {
                year -= 1;
                if (year < 2016) {
                    year = 2016;
                }
            } else {
                month -= 1;
                if (month < 1) {
                    month = 1;
                }
            }
            method.update();
        });
        $("#arrow-right").click(function () {
            if (type === 1) {
                year += 1;
                if (year > new Date().getFullYear()) {
                    year = new Date().getFullYear()
                }
            } else {
                month += 1;
                if (month > 12) {
                    month = 12;
                }
            }
            method.update();
        });

        method.update();

        let e1 = document.getElementById('barChart1').getContext('2d');
        let e2 = document.getElementById('barChart2').getContext('2d');
        let e3 = document.getElementById('barChart3').getContext('2d');
        let e4 = document.getElementById('barChart4').getContext('2d');
        let e5 = document.getElementById('barChart5').getContext('2d');
        // let e6 = document.getElementById('barChart6').getContext('2d');//工艺质检部项目
        // let e7 = document.getElementById('barChart7').getContext('2d');//工艺质检部部分

        window.myBar1 = new Chart(e1, {
            type: 'horizontalBar',
            data: barChartData1,
            options: {
                title: {
                    display: true,
                    fontSize: 20,
                    text: '挤压装备设计所'
                },
                legend: {
                    display: false,
                    position: 'left',
                    labels: {
                        fontSize: 18
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        stacked: true,
                        /*ticks:{
                            max :100
                        }*/
                    }],
                    yAxes: [{
                        stacked: true
                    }
                    ]
                },
                hover: {
                    animationDuration: 0  // 防止鼠标移上去，数字闪烁
                },
                animation: {           // 这部分是数值显示的功能实现
                    onComplete: function () {
                        var chartInstance = this.chart,
                            ctx = chartInstance.ctx;
                        // 以下属于canvas的属性（font、fillStyle、textAlign...）
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = "black";
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        var total = [];
                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                if (dataset.label === '未开始') {
                                    var n = total[index] + dataset.data[index];
                                    // ctx.fillText(n, bar._model.x, bar._model.y - 5);
                                    ctx.fillText(n, bar._model.x + 8, bar._model.y + 8);
                                } else {
                                    total.push(dataset.data[index]);
                                }
                            });
                        });
                    }
                }
            }
        });
        window.myBar2 = new Chart(e2, {
            type: 'horizontalBar',
            data: barChartData2,
            options: {
                title: {
                    display: true,
                    fontSize: 20,
                    text: '熔铸装备设计所'
                },
                legend: {
                    display: false,
                    position: 'left',
                    labels: {
                        fontSize: 18
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        stacked: true,
                        /*ticks:{
                            max :100
                        }*/
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                },
                hover: {
                    animationDuration: 0  // 防止鼠标移上去，数字闪烁
                },
                animation: {           // 这部分是数值显示的功能实现
                    onComplete: function () {
                        var chartInstance = this.chart,
                            ctx = chartInstance.ctx;
                        // 以下属于canvas的属性（font、fillStyle、textAlign...）
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = "black";
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        var total = [];
                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                if (dataset.label === '未开始') {
                                    var n = total[index] + dataset.data[index];
                                    // ctx.fillText(n, bar._model.x, bar._model.y - 5);
                                    ctx.fillText(n, bar._model.x + 8, bar._model.y + 8);
                                } else {
                                    total.push(dataset.data[index]);
                                }
                            });
                        });
                    }
                }
            }
        });
        window.myBar3 = new Chart(e3, {
            type: 'horizontalBar',
            data: barChartData3,//熔铸
            options: {
                title: {
                    display: true,
                    fontSize: 20,
                    text: '自动化与智能控制设计所'
                },
                legend: {
                    display: false,
                    position: 'left',
                    labels: {
                        fontSize: 18
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        stacked: true,
                        /*ticks:{
                            max : max(barChartData3.datasets) + 2
                        }*/
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                },
                hover: {
                    animationDuration: 0  // 防止鼠标移上去，数字闪烁
                },
                animation: {           // 这部分是数值显示的功能实现
                    onComplete: function () {
                        var chartInstance = this.chart,
                            ctx = chartInstance.ctx;
                        // 以下属于canvas的属性（font、fillStyle、textAlign...）
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = "black";
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        var total = [];
                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                if (dataset.label === '未开始') {
                                    var n = total[index] + dataset.data[index];
                                    // ctx.fillText(n, bar._model.x, bar._model.y - 5);
                                    ctx.fillText(n, bar._model.x + 8, bar._model.y + 8);
                                } else {
                                    total.push(dataset.data[index]);
                                }
                            });
                        });
                    }
                }
            }
        });
        window.myBar4 = new Chart(e4, {
            type: 'horizontalBar',
            data: barChartData4,
            options: {
                title: {
                    display: true,
                    fontSize: 20,
                    text: '流体传动设计所'
                },
                legend: {
                    display: false,
                    position: 'left',
                    labels: {
                        fontSize: 18
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        stacked: true,
                        /*ticks:{
                            max :100
                        }*/
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                },
                hover: {
                    animationDuration: 0  // 防止鼠标移上去，数字闪烁
                },
                animation: {           // 这部分是数值显示的功能实现
                    onComplete: function () {
                        var chartInstance = this.chart,
                            ctx = chartInstance.ctx;
                        // 以下属于canvas的属性（font、fillStyle、textAlign...）
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = "black";
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        var total = [];
                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                if (dataset.label === '未开始') {
                                    var n = total[index] + dataset.data[index];
                                    // ctx.fillText(n, bar._model.x, bar._model.y - 5);
                                    ctx.fillText(n, bar._model.x + 8, bar._model.y + 8);
                                } else {
                                    total.push(dataset.data[index]);
                                }
                            });
                        });
                    }
                }
            }
        });
        // window.myBar5 = new Chart(e5, {
        //     type: 'horizontalBar',
        //     data: barChartData5,
        //     options: {
        //         title: {
        //             display: true,
        //             fontSize: 20,
        //             text: ''
        //         },
        //         legend: {
        //             display: false,
        //             position: 'left',
        //             labels: {
        //                 fontSize: 18
        //             }
        //         },
        //         tooltips: {
        //             mode: 'index',
        //             intersect: false
        //         },
        //         responsive: true,
        //         maintainAspectRatio: false,
        //         scales: {
        //             xAxes: [{
        //                 stacked: true,
        //                 /*ticks:{
        //                     max :100
        //                 }*/
        //             }],
        //             yAxes: [{
        //                 stacked: true
        //             }]
        //         },
        //         hover: {
        //             animationDuration: 0  // 防止鼠标移上去，数字闪烁
        //         },
        //         animation: {           // 这部分是数值显示的功能实现
        //             onComplete: function () {
        //                 var chartInstance = this.chart,
        //                     ctx = chartInstance.ctx;
        //                 // 以下属于canvas的属性（font、fillStyle、textAlign...）
        //                 ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        //                 ctx.fillStyle = "black";
        //                 ctx.textAlign = 'center';
        //                 ctx.textBaseline = 'bottom';
        //                 var total = [];
        //                 this.data.datasets.forEach(function (dataset, i) {
        //                     var meta = chartInstance.controller.getDatasetMeta(i);
        //                     meta.data.forEach(function (bar, index) {
        //                         if (dataset.label === '未开始') {
        //                             var n = total[index] + dataset.data[index];
        //                             // ctx.fillText(n, bar._model.x, bar._model.y - 5);
        //                             ctx.fillText(n, bar._model.x + 8, bar._model.y + 8);
        //                         } else {
        //                             total.push(dataset.data[index]);
        //                         }
        //                     });
        //                 });
        //             }
        //         }
        //     }
        // });
        // window.myBar6 = new Chart(e6, {
        //     type: 'horizontalBar',
        //     data: barChartData6,
        //     options: {
        //         title: {
        //             display: true,
        //             fontSize: 20,
        //             text: '项目进度总览'
        //         },
        //         legend: {
        //             display: false,
        //             position: 'left',
        //             labels: {
        //                 fontSize: 18
        //             }
        //         },
        //         tooltips: {
        //             mode: 'index',
        //             intersect: false
        //         },
        //         responsive: true,
        //         maintainAspectRatio: false,
        //         scales: {
        //             xAxes: [{
        //                 stacked: true,
        //                 /*ticks:{
        //                     max :100
        //                 }*/
        //             }],
        //             yAxes: [{
        //                 stacked: true
        //             }]
        //         },
        //         hover: {
        //             animationDuration: 0  // 防止鼠标移上去，数字闪烁
        //         },
        //         animation: {           // 这部分是数值显示的功能实现
        //             onComplete: function () {
        //                 var chartInstance = this.chart,
        //                     ctx = chartInstance.ctx;
        //                 // 以下属于canvas的属性（font、fillStyle、textAlign...）
        //                 ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        //                 ctx.fillStyle = "black";
        //                 ctx.textAlign = 'center';
        //                 ctx.textBaseline = 'bottom';
        //                 var total = [];
        //                 this.data.datasets.forEach(function (dataset, i) {
        //                     var meta = chartInstance.controller.getDatasetMeta(i);
        //                     meta.data.forEach(function (bar, index) {
        //                         if (dataset.label === '未开始') {
        //                             var n = total[index] + dataset.data[index];
        //                             // ctx.fillText(n, bar._model.x, bar._model.y - 5);
        //                             ctx.fillText(n, bar._model.x + 8, bar._model.y + 8);
        //                         } else {
        //                             total.push(dataset.data[index]);
        //                         }
        //                     });
        //                 });
        //             }
        //         }
        //     }
        // });
        // window.myBar7 = new Chart(e7, {
        //     type: 'horizontalBar',
        //     data: barChartData7,
        //     options: {
        //         title: {
        //             display: true,
        //             fontSize: 20,
        //             text: '工艺编制任务总览'
        //         },
        //         legend: {
        //             display: false,
        //             position: 'left',
        //             labels: {
        //                 fontSize: 18
        //             }
        //         },
        //         tooltips: {
        //             mode: 'index',
        //             intersect: false
        //         },
        //         responsive: true,
        //         maintainAspectRatio: false,
        //         scales: {
        //             xAxes: [{
        //                 stacked: true,
        //                 /*ticks:{
        //                     max :100
        //                 }*/
        //             }],
        //             yAxes: [{
        //                 stacked: true
        //             }]
        //         },
        //         hover: {
        //             animationDuration: 0  // 防止鼠标移上去，数字闪烁
        //         },
        //         animation: {           // 这部分是数值显示的功能实现
        //             onComplete: function () {
        //                 var chartInstance = this.chart,
        //                     ctx = chartInstance.ctx;
        //                 // 以下属于canvas的属性（font、fillStyle、textAlign...）
        //                 ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        //                 ctx.fillStyle = "black";
        //                 ctx.textAlign = 'center';
        //                 ctx.textBaseline = 'bottom';
        //                 var total = [];
        //                 this.data.datasets.forEach(function (dataset, i) {
        //                     var meta = chartInstance.controller.getDatasetMeta(i);
        //                     meta.data.forEach(function (bar, index) {
        //                         if (dataset.label === '未开始') {
        //                             var n = total[index] + dataset.data[index];
        //                             // ctx.fillText(n, bar._model.x, bar._model.y - 5);
        //                             ctx.fillText(n, bar._model.x + 8, bar._model.y + 8);
        //                         } else {
        //                             total.push(dataset.data[index]);
        //                         }
        //                     });
        //                 });
        //             }
        //         }
        //     }
        // });
    });
</script>
</body>
</html>
